<template>
	<div class="Box_Img">
		<div class="HeadImg" @click="SelectImg">
			<img v-if="!img" src="./DefaultHead.webp" alt="">
			<img v-else :src="img" alt="">
			<button v-show="false"></button>
			<input type="file" name="" v-show="false" id="" value="" ref="File" @change="SetSrc"/>
		</div>
		<span v-if="!img">
			请选择头像
		</span>
		<span v-else>
			头像
		</span>
	</div>
</template>

<script lang="ts">
	import {defineComponent,ref} from 'vue';
	import {$_} from '@assets/tools/throttle';
	export default defineComponent({
		setup(props,content){
			var File:any=ref(null);
			var img=ref('')
			var SelectImg:any=$_(function(){
				File.value.click();
			},100);
			
			function SetSrc(e:any){
				var file=e.target.files[0];
				var url=URL.createObjectURL(file);
				img.value=url
				content.emit('img_url',url)
			}
			return {
				File,
				SelectImg,
				SetSrc,
				img
			}
		}
	})
</script>

<style scoped="scoped">
	.Box_Img{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.HeadImg{
		width: 100px;
		height: 100px;
		border-radius: 50%;
		overflow: hidden;
	}
	.HeadImg img{
		width: 100%;
		height: 100%;
	}
</style>